<template>
	<view class="content">
		<view>
			<view class="cu-form-group">
				<view class="title">预约名称</view>
				<input disabled name="input" :value="product.goods_name" />

			</view>

			<view class="cu-form-group">
				<view class="title">上门地址</view>

				<!-- <input placeholder="请选择上门地址" :value="address"  @input="inputChange" data-name="address" name="input"></input> -->
				<textarea
					style="height: 60upx; vertical-align: middle;"
					maxlength="-1"
					@input="inputChange"
					:value="address"
					data-name="address"
					placeholder="请选择上门地址"
				></textarea>
				<text class="cuIcon-locationfill text-orange" @click="chooseAddress"></text>
			</view>

			<view class="cu-form-group">
				<view class="title">联系人姓名</view>
				<input placeholder="请输入联系人姓名" name="input" :value="name" @input="inputChange" data-name="name" />
			</view>
			

			<view class="cu-form-group">
				<view class="title">联系人号码</view>
				<input placeholder="请输入联系人手机号码" name="input" :value="phone" @input="inputChange" data-name="phone" />
			</view>

			<!-- !!!!! placeholder 在ios表现有偏移 建议使用 第一种样式 -->
			<view class="cu-form-group">
				<textarea maxlength="-1" :disabled="modalName != null" @input="inputChange" data-name="title" placeholder="请在这里输入您需要的服务内容,如换门锁"></textarea>
			</view>

			<view class="margin-top-20" style=" padding: 20upx;">百应到家平台服务由第三方商家提供，在线支付订单能保障您的个人权益和信息安全</view>
			<view class="box " style=" padding: 20upx;">
				<button @click="postForm" class="cu-btn block bg-blue margin-tb-sm lg">
					<text :class="loadding == 1 ? 'cuIcon-loading2 cuIconfont-spin' : 'cuIconfont-spin'"></text>
					确认预约服务
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import beeApp from '../../beeApp.js';

export default {
	data() {
		return {
			modalName: null,
			loadding: 0,
			name: '',
			phone: '',
			title:"",
			address: '',
			content: '',
			user_info: {
				community: {}
			},
			product:{}
		};
	},
	onLoad(option) {
		this.id = option.id;
		// beeApp.alert("yiqwyei");
		beeApp.getUserInfo(userInfo => {
			// this.userInfo = userInfo;
			this.getUserInfo();
		});
		this.loadData();
	},
	onShow: function() {
		var reload = beeApp.getPageData('pages/index/index', 'reload');
		if (reload == 1) {
			beeApp.setPageData('pages/index/index', { reload: 0 });
			this.getUserInfo();
		}
	},

	methods: {
		inputChange(e) {
			// console.log(e);
			var name = e.currentTarget.dataset.name;
			this[name] = e.detail.value;
		},
		loadData() {
			var that = this;
			beeApp.api(
				'/mall/goods/find',
				{
					id: this.id
				},
				function(res) {
					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}
					that.product = res.data;
				}
			);
		},
		chooseAddress: function() {
			var that = this;
			uni.chooseLocation({
				success: function(res) {
					console.log('chooseLocation:', res);
					that.address = res.address;
					that.location = res;
				}
			});
		},

		getLocation: function() {
			var that = this;
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					console.log('getLocation:', res);
					// console.log('当前位置的经度：' + res.longitude);
					// console.log('当前位置的纬度：' + res.latitude);
					that.address = res.address.province + res.address.city + res.address.district + res.address.street + res.address.streetNum;
					that.location = res;
				}
			});
		},

		getUserInfo: function() {
			var that = this;
			beeApp.api(
				'/api/user/info',
				{
					fields: 'user_id,store_id,phone,nickname,avatarUrl,last_update_time'
				},
				function(res) {
					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}
					that.user_info = res.data;
					that.phone = that.user_info.phone;
					that.name = that.user_info.nickname;
				}
			);
		},
		postForm: function() {
			var that = this;
			if (that.loadding == 1) {
				return;
			}

			if (!this.address) {
				beeApp.alert('请选择上门地址');
				return;
			}
			if (this.name == '') {
				beeApp.alert('请输入姓名');
				return;
			}
			if (this.phone == '') {
				beeApp.alert('请输入手机号');
				return;
			}

			if (this.title == '') {
				beeApp.alert('请输入服务内容');
				return;
			}
			that.loadding = 1;
			beeApp.api(
				'apiv2/dao_jia/add',
				{
					product_id:this.id,
					title: this.title,
					name: this.name,
					phone: this.phone,
					address: this.address,
					longitude: this.location.longitude,
					latitude: this.location.latitude,
					method: 'POST'
				},
				function(res) {
					that.loadding = 0;

					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}
					that.title = '';
					beeApp.alert('恭喜您,提交成功！', function() {
						uni.navigateTo({
							url: '/pages/order/detail?order_sn=' + res.data.order_sn
						});
					});
				}
			);
		}
	}
};
</script>
